/*
 * @Author: jiu yin
 * @Date: 2024-05-31 14:03:31
 * @LastEditTime: 2024-06-14 14:51:30
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \studio-web-admin\src\view\manualWebSocket\index.tsx
 * jiu
 */
import { ExclamationCircleOutlined } from "@ant-design/icons";
import { Radio, Space, Input, Popconfirm, Button, message } from "antd";
import { useState, useEffect } from "react";
import "./index.scss";
import { get_user_info } from "@/api/home";
import { connect } from "@/utils/webSocket";
import {setWsHost,getWsHost} from "@/utils/localStorage"

export default function index() {
	//获取自动链接
	let [userInfo, setUserInfo] = useState<any>({});
	useEffect(() => {
		get_user_info().then((res: any) => {
			setUserInfo(res.data);
		});
		let ws_host =getWsHost()
		if (ws_host?.radio==2) {
			setValue(2);
			setInput_value(ws_host?.ws_host);
		}
	}, []);

	let regWs = /^(ws:\/\/||wss:\/\/)\w+/;

	let [value, setValue] = useState(1);
	const onChange = (e: any) => {
		console.log(e.target.value);
		let key = e.target.value;
		if (key == 1 && regWs.test(userInfo.websocket_host)) {
			connect(userInfo.websocket_host);
			setValue(key);
			setWsHost({ ws_host: userInfo.websocket_host, radio: 1 })
		} else if (key == 2 && regWs.test(input_value)) {
			connect(input_value);
			setValue(key);
		} else {
			message.error("请输入正确的ws地址");
		}
	};
	let [input_value, setInput_value] = useState("");
	const confirm = (e:any) => {
		if (regWs.test(input_value)) {
			connect(input_value);
			message.success("配置成功");
			setWsHost({ ws_host: input_value, radio: 2 })
			setValue(2);
		} else {
			message.error("配置失败,地址错误");
		}
	};

	return (
		<div>
			<h3 className="c-#161940 mt-24px">内网播控WS服务地址配置</h3>
			<section className="mt-30px">
				<Radio.Group onChange={onChange} value={value}>
					<Space direction="vertical">
						<Radio value={1}>
							<div className="relative c-#161940 ">
								<div className="w-800px">
									<span className="font-700">自动获取 </span>
									<span className="ml-24px  c-#161940">已获取地址: {userInfo.websocket_host}</span>
								</div>
								<p className="c-#9697A9 text-14px absolute left-84px top-25px">
									<ExclamationCircleOutlined style={{ color: "red" }} />
									&nbsp;若地址错误或连接失败，请手动输入ws地址连接
								</p>
							</div>
						</Radio>
						<Radio value={2} style={{ marginTop: "58px" }}>
							<div className="flex items-center">
								<span className="font-700">手动设置 </span>
								<div className="ml-24px">
									<Input
										style={{ width: "340px" }}
										value={input_value}
										onChange={e => setInput_value(e.target.value)}></Input>
								</div>
								<div className="ml-10px">
									<Popconfirm
										title="确定"
										description="确定要手动设置内网播控WS服务吗?"
										onConfirm={confirm}
										okText="Yes"
										cancelText="No">
										<Button type="primary" disabled={value==1?true:false}>确定</Button>
									</Popconfirm>
								</div>
							</div>
						</Radio>
					</Space>
				</Radio.Group>
			</section>
		</div>
	);
}
